<!DOCTYPE html>
<html lang="en">
<!--[if IE 9 ]>
<html class="ie9"><![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>支持作者</title>

    <link href="../vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css"
          rel="stylesheet">
    <link href="css/site.reward.css" rel="stylesheet"><!-- Site CSS -->

    <link type="image/x-icon" href="../resource/img/favicon.ico" rel=icon/>
    <link type="image/x-icon" href="../resource/img/favicon.ico" rel="shortcut icon"/>

    <link href="../resource/css/essay.material.floating.button.css" rel="stylesheet"><!-- Material Floating Button -->
    <style>
        .section { width: 100%; }
        .support {
            padding: 1px 8px; cursor: pointer; background-color: #101E2A31;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius: 10px;
        }
        .img-alipay { border-radius: 9px;  margin-top: -370px; margin-left: -105px; position: absolute; }
        .title { font-size: 17px; font-weight: bold; text-align: center }
        .barrage { width: 100%; background: #2B3942; height: 400px; overflow: hidden; position: relative; }
        .barrage div { position: absolute; }

    </style>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?e3a97a0eee3cb03b5caf792f58032743";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>

<section id="main" style="margin:auto;padding:0;width: 910px;">
    <section style="margin-top: 10px">
        <div class="card">
            <div class="card__body" style="padding-top: 1px">
                <!--<h3 class="title">鸣谢</h3>--><br>
                <div class="table-responsive" style="font-size: 16px">
                    <div><i class="zmdi zmdi-globe-alt"></i> 备用网址：
                        <a target="_blank"  href="http://zhongbaoyan.github.io/">zhongbaoyan.github.io</a>
                    </div>
                    <div><i class="zmdi zmdi-email"></i> 联系方式：
                        <a target="_blank" href="mailto:zhoumushui@foxmail.com">zhoumushui@foxmail.com</a>
                        （欢迎提出建议、指出错误）
                    </div>
                    <div><i class="zmdi zmdi-code-setting"></i> 数据来源：<a target="_blank" href="http://ciasi.org.cn/">中国保险汽车安全指数（中保研）</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section style="position:relative;">

        <div class="card">
            <div id="card_body3" class="card__body" style="padding-top: 1px;text-align: center">
                <h3 class="title">支持作者</h3><br>
                <div class="barrage">
                    <!-- 100 -->
                    <div><span class="support">**坚</span></div>
                    <!-- 66 -->
                    <div><span class="support">**斯</span></div>
                    <!-- 50 -->
                    <div><span class="support">*磊</span></div>
                    <!-- 18 -->
                    <div><span class="support">李澄清</span></div>
                    <div><span class="support">**亮</span></div>
                    <!-- 10 -->
                    <div><span class="support">***昊</span></div><!-- 哔哔哔哔哔哔:昊 -->
                    <div><span class="support">*骁</span></div>
                    <div><span class="support">*懿</span></div>
                    <div><span class="support">*继新</span></div>
                    <div><span class="support">*新筑</span></div>
                    <div><span class="support">*文彬</span></div>
                    <div><span class="support">*炅</span></div>
                    <div><span class="support">*骏</span></div>
                    <!-- 8 -->
                    <div><span class="support">*良</span></div>
                    <!-- 6 -->
                    <div><span class="support">王博文</span></div>
                    <div><span class="support">*博强</span></div>
                    <div><span class="support">**翔</span></div>
                    <!-- 5 -->
                    <div><span class="support">任翔</span></div><!-- 小任 -->
                    <div><span class="support">*昭</span></div>
                    <div><span class="support">*旭林</span></div>
                    <div><span class="support">科峰</span></div>
                    <div><span class="support">*通</span></div>
                    <div><span class="support">**杰</span></div>
                    <div><span class="support">*凡</span></div>
                    <!-- 2 -->
                    <div><span class="support">*寒</span></div>
  
                    <div><span class="support">*鲁</span></div><!-- zhlive:鲁 -->
                    <div><span class="support">*志杰</span></div>
                    <!-- 1 -->
                    <div><span class="support">**国</span></div><!-- 小興興:国 -->
                    <div><span class="support">*思成</span></div>
                    <div><span class="support">*思明</span></div>
                    <div><span class="support">杭锦峰</span></div>
                    <div><span class="support">*江林</span></div>
                    <div><span class="support">*暄</span></div>
                    <div><span class="support">*健强</span></div>
                    <div><span class="support">*文昭</span></div>
                    <div><span class="support">*群</span></div>
                    <div><span class="support">子帅</span></div>
                    <div><span class="support">*泽彬</span></div>
                    <div><span class="support">*可</span></div>
                    <div><span class="support">**凯</span></div>
                    <div><span class="support">**斌</span></div>
                    <div><span class="support">**洋</span></div>
                    <div><span class="support">*勇</span></div>
                    <div><span class="support">*龙</span></div>
                    <div><span class="support">*豪</span></div>

                    <div><span class="support">**耀</span></div>

                    <div><span class="support">*范冬</span></div>
                    <div><span class="support">*浩</span></div>

                    <div><span class="support">*忠阳</span></div>

                    <div><span class="support">方益民</span></div><!-- YIFang0926 -->
                </div>
                <img class="img-alipay" src="../resource/img/pay/Alipay.png">
            </div>
        </div>
    </section>

    <!--div style="text-align: center;display: none">
        <span id='busuanzi_container_site_pv'>访问: <span id='busuanzi_value_site_pv'></span></span>
    </div-->

    <footer id="footer" class="font-yahei"></footer>
</section>

<script src="../vendors/bower_components/jquery/dist/jquery.min.js"></script><!-- jQuery -->
<script async src="../resource/js/busuanzi.pure.mini.js"></script><!-- busuanzi PV&UV -->

<!-- Nest Follow Mouse Background -->
<script type="text/javascript" color="255,255,255" opacity='1.0' zIndex="-1" count="50"
        src="../resource/js/canvas-nest.min.js"></script>

<script>
    var directoryDepth = 1;
</script>
<!--script src="../resource/js/zms.page.pattern.js"></script-->

<script type="text/javascript">
    $(function () {
        $(".barrage").barrage()
    });
    (function () {
        var barrage = function (ele, options) {
            var defaults = {
                color: [
                    "#FF9999", "#F44336", "#E91E63", "#9D77FF",
                    "#2196F3", "#35D2F4", "#00BCD4", "#009688",
                    "#4CAF50", "#CDDC39", "#FFEB3B", "#FFC107",
                ],
                wrap: ele
            };
            this.settings = $.extend({}, defaults, options || {});
            this._init();
            this.bindEven();
        };
        barrage.prototype = {
            _init: function () {
                var item = $(this.settings.wrap).find("div");
                for (var i = 0; i < item.length; i++) {
                    item.eq(i).css({
                        top: this.getRandomTop(i) + "px",
                        color: this.getRandomColor(i),
                        fontSize: this.getRandomSize(i) + "px"
                    });
                    item.eq(i).css({
                        right: -item.eq(i).width()
                    })
                }
                this.randomTime(0);
            },
            bindEven: function () {
                var _this = this;
                $(".addbarrage .submit").on('click', function () { _this._click(_this); });
            },
            getRandomColor: function (index) {
                var max = this.settings.color.length;
                //var randomNum = Math.floor(Math.random() * max);
                return this.settings.color[index % max];
            },
            getRandomTop: function (index) { 
                return (index % 11) * 35; //(Math.random() * 350).toFixed(1);
            },  
            getRandomSize: function (index) {
                return 25 - index * 0.2; // 15 + Math.random() * 10);
            },
            getRandomTime: function () {
                return Math.floor((10 + Math.random() * 10)) * 1000;
            },
            randomTime: function (n) {
                var obj = $(this.settings.wrap).find("div");
                var _this = this;
                var len = obj.length;
                if (n >= len) n = 0;
                setTimeout(function () {
                    n++;
                    _this.randomTime(n)
                }, 1000);
                var item = obj.eq(n), _w = item.outerWidth(!0);
                item.animate({
                    left: -_w
                }, _this.getRandomTime(), "linear", function () {
                    item.css({right: -_w, left: ""});
                    _this.randomTime(n)
                });
            },
            _click: function (obj) {
                var _this = obj;
                var _val = $(".barVal");
                if (_val.val() == "") {
                    return false;
                }
                $(_this.settings.wrap).append("<div><span class='new'>" + _val.val() + "</span></div>");
                _this._init();
                _val.val("");
            }
        };
        $.fn.barrage = function (opt) {
            var bger = new barrage(this, opt);
        }
    })(jQuery);
</script>

</body>
</html>